<template>
  <div>
    <el-card shadow="always" :body-style="{ padding: '5px 20px 15px 20px' }">
      <div class="main_area">
        <!-- 操作区域 -->
        <div class="action_area" ref="action_area">
          <vxe-toolbar ref="xToolbar" :size="formSize" :custom="custom" :refresh="{ query: index }">
            <template #buttons>
              <div>
                <el-button
                    id="add" type="success"
                    :size="formSize" icon="el-icon-plus"
                    @click="add()">新增</el-button>
                <el-button
                    id="editor" type="primary"
                    :size="formSize" icon="el-icon-edit-outline"
                    :disabled="single" @click="editor(ids)">修改
                </el-button>
                <el-button
                    id="buildApplication" type="warning"
                    :size="formSize" icon="el-icon-folder-checked"
                    :disabled="single" @click="buildApplication(ids)">生成应用
                </el-button>
                <el-button
                    id="deleteApplication" type="danger"
                    :size="formSize" icon="el-icon-delete"
                    :disabled="single" @click="deleteApplication(ids)">卸载
                </el-button>
                <el-button
                    id="backupDatabase" type="success"
                    :size="formSize" icon="el-icon-notebook-2"
                    @click="backupDatabase()">备份数据库
                </el-button>
                <!-- 开发功能，无需要开启 -->
                <el-tooltip content="开发功能，慎重使用；会清除所有新建菜单、字段、方法、用户、角色、部门和授权信息！" placement="top-start">
                  <el-button
                      id="initDb" type="danger"
                      :size="formSize" icon="el-icon-notebook-2"
                      @click="initDb()">初始化数据库
                  </el-button>
                </el-tooltip>
              </div>
            </template>
          </vxe-toolbar>
        </div>
        <!-- 表格区域 -->
        <div class="table_area" ref="table_area">
          <vxe-table
              ref="xTable" id="xTable" border height="100%" :data="list"
              :loading="loading" :size="formSize"
              :keyboard-config="keyboardConfig" :custom-config="customConfig"
              :column-config="columnConfig" :row-config="rowConfig"
              :edit-config="editConfig" :checkbox-config="checkboxConfig"
              @checkbox-change="checkboxChange" @checkbox-all="checkboxChange">
            <vxe-column type="checkbox" width="40"></vxe-column>
            <vxe-column title="编号" field="app_id" width="65" sortable></vxe-column>
            <vxe-column title="应用名称" field="application_name"></vxe-column>
            <vxe-column title="应用目录" field="app_dir"></vxe-column>
            <vxe-column title="应用类型" field="app_type" width="90">
              <template #default="{ row }">
                <el-tag type="warning" v-if="row.app_type == '0'" :size="formSize" effect="dark">空应用</el-tag>
                <el-tag type="primary" v-if="row.app_type == '1'" :size="formSize" effect="dark">后台应用</el-tag>
                <el-tag type="warning" v-if="row.app_type == '2'" :size="formSize" effect="dark">API应用</el-tag>
              </template>
            </vxe-column>
            <vxe-column title="状态" field="status" width="80" align="center">
              <template #default="{ row }">
                <el-tag type="primary" v-if="row.status == '1'" :size="formSize" effect="dark">启用</el-tag>
                <el-tag type="warning" v-if="row.status == '0'" :size="formSize" effect="dark">禁用</el-tag>
              </template>
            </vxe-column>
            <!-- vxe-column title="域名" field="domain"></vxe-column -->
            <vxe-column title="操作" width="200">
              <template #default="{ row }">
                <el-button :size="formSize" type="primary" @click="editor(row)"><i class="el-icon-edit-outline"/>修改
                </el-button>
                <el-button :size="formSize" type="danger" @click="deleteApplication(row)"><i class="el-icon-delete"/>卸载
                </el-button>
              </template>
            </vxe-column>
          </vxe-table>
        </div>
        <!-- 分页区域 -->
        <div class="pagination_area">
          <vxe-pager
              :size="formSize" :loading="loading" :current-page="page_data.page"
              :page-size="page_data.limit" :total="page_data.total"
              :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
              @page-change="pageChange">
          </vxe-pager>
        </div>
      </div>
    </el-card>
    <!--添加-->
    <Add :show.sync="dialog.addDialogStatus" :size="formSize" @refesh_list="index"></Add>
    <!--修改-->
    <Update :show.sync="dialog.updateDialogStatus" :info="info" :size="formSize" @refesh_list="index"></Update>

    <!-- 操作向导 -->
    <v-tour name="myAppTour" :steps="steps" :callbacks="callbacks" :options="myOptions"></v-tour>
  </div>
</template>
<script>

import {applicationList, getApplicationInfo, deleteApplication, buildApplication, initDb, backupDatabase} from '../sys'
import Add from './Add.vue'
import Update from './Update.vue'
import mixinVexTable from "@/mixin/vxeTable"

export default {
  components: {Add, Update},
  mixins: [mixinVexTable],
  data() {
    return {
      dialog: {
        addDialogStatus: false,
        updateDialogStatus: false,
      },
      info: {},
      page_data: {limit: 10, page: 1, total: 50,},
      selectRow: {app_type: 0, app_dir: '', app_id: 0,},
      app_type: [{label: '空应用', value: 1}, {label: 'API应用', value: 2},],
      statusList: [{label: '启用', value: 1}, {label: '禁用', value: 0}],

      // 表格配置
      keyboardConfig: {
        isArrow: true,
      },
      customConfig: {
        storage: true,
      },
      columnConfig: {
        isCurrent: true,
        isHover: true,
        resizable: true,
      },
      rowConfig: {
        keyField: 'user_id',
        isCurrent: true,
        isHover: true,
      },
      checkboxConfig: {
        range: true,
        reserve: true,
        trigger: 'row',
        // highlight: true,
      },
      editConfig: {
        enabled: false,
        trigger: 'dblclick',
        mode: 'cell',
      },
      // 向导的步骤定义，分别定义一个原生，标题，提示内容，支持html代码
      steps: [
        {
          target: '#add',
          header: {
            title: '创建应用',
          },
          content: `<div class="tour">点击按钮创建新的应用，支持创建API接口应用；</div>`
        },
        {
          target: '#editor',
          header: {
            title: '修改应用',
          },
          content: `<div class="tour">修改应用的属性；</div>`
        },
        {
          target: '#buildApplication',
          header: {
            title: '生成应用',
          },
          content: `<div class="tour">点击按钮可以生成应用的代码；</div>`
        }, {
          target: '#deleteApplication',
          header: {
            title: '卸载应用',
          },
          content: `<div class="tour">卸载应用会自动删除应用目录，请确认删除前，已备份重要数据；</div>`
        },
        {
          target: '#initDb',
          header: {
            title: '初始化数据',
          },
          content: `<div class="tour">此功能为清空数据库中的运行数据；删除内置功能中新建的数据，保留新建的菜单、字段和方法；请在使用此功能前，认真阅读源码，备份数据库后再操作！</div>`
        },

      ],
    };
  },
  activated() {
    // 页面每次载入都执行
    this.index()
    // 默认关闭向导，如需开启请去掉下面的注释
    // 第一次打开软件自动启动向导，点击跳过或者完成以后，则不再启动向导
    // if (!localStorage.getItem('finish_app_tour')) {
    //   setTimeout(()=>{
    //     this.$tours['myAppTour'].start()
    //   },2000)
    // }
  },
  mounted() {
    this.$nextTick(() => {
      var actionHeight = this.$refs.action_area.offsetHeight
      var height = document.body.offsetHeight - this.headerHeight - this.tagHeight - actionHeight - 80
      this.$refs.table_area.style.height = height + 'px';
    });
  },
  methods: {
    // 选中行
    checkboxChange({row}) {
      // 选中的行
      const checkedRecords = this.$refs.xTable.getCheckboxRecords()
      // app_id 的数组
      this.ids = checkedRecords.map(item => item.app_id)
      // 当前选中的对象
      this.selectRow = row
      // 是否是单选
      this.single = checkedRecords.length != 1
      // 是否是多选
      this.multiple = !checkedRecords.length
    },
    // 载入数据
    index(val) {
      // 基本分页参数
      let param = {limit: this.page_data.limit, page: this.page_data.page}
      // 其他搜索参数
      if (val) param = Object.assign(param, val)
      // 开始显示载入效果
      this.loading = true
      // 获取应用列表
      applicationList(param).then(res => {
        if (res.status == 200) {
          this.list = res.data.data
          this.page_data.total = res.data.total
          this.loading = false
        }
      });
    },
    // 显示添加窗口
    add() {
      this.dialog.addDialogStatus = true
    },
    // 显示编辑窗口
    editor(row) {
      let id = row.app_id ? row.app_id : this.ids.join(',')
      getApplicationInfo({app_id: id}).then(res => {
        if (res.status == 200) {
          this.dialog.updateDialogStatus = true;
          this.info = res.data
        } else {
          this.$message.error('获取信息失败!')
        }
      })
    },
    // 生成应用
    buildApplication(row) {
      this.$MyUtils.confirm({content: '确定生成应用吗'}).then(() => {
        let id = row.app_id ? row.app_id : this.ids.join(',')
        buildApplication({app_id: id}).then(res => {
          if (res.status == 200) {
            this.$message({message: '生成成功', type: 'success'})
          }
        })
      })
    },
    // 删除应用
    deleteApplication(row) {
      this.$MyUtils.confirm({content: '确定要卸载应用吗'}).then(() => {
        let id = row.app_id ? row.app_id : this.ids.join(',')
        if (id == 1) {
          this.$message.error('该应用禁止卸载!')
        }
        deleteApplication({app_id: id}).then(res => {
          if (res.status == 200) {
            this.$message({message: '操作成功', type: 'success'})
            this.index()
          } else {
            this.$message.error('操作失败!')
          }
        });
      }).catch(() => {
      });
    },
    // 备份数据库到脚本文件
    backupDatabase(){
      backupDatabase().then(res=>{
        let a = document.createElement('a') //创建一个a标签
        if(process.env.NODE_ENV == 'development'){
          a.href = process.env.VUE_APP_BASE_API + '/' + res.data;
        }
        if(process.env.NODE_ENV == 'production'){
          a.href = window.location.origin + '/' + res.data;
        }
        a.click();
        URL.revokeObjectURL(a.href); //释放之前创建的url对象
      })
    },
    // 初始化数据库，清理测试数据
    initDb() {
      let content = '初始化数据库，清理测试数据，您确定要清理数据吗？';
      this.$MyUtils.confirm({content: content}).then(() => {
        this.loading = true
        initDb().then(res => {
          if (res.status == 200) {
            this.$message({message: res.msg, type: 'success'})
          }
          this.loading = false
        }).catch(() => {
          this.loading = false
        });
      })
    },
    // 向导的回调
    onPageFinish() {
      localStorage.setItem('finish_app_tour', true)
    },
  },
};
</script>
<style lang="scss">
@import '@/assets/scss/common.scss';
//.table_area {
//  height: calc(100vh - 235px);
//}
</style>
